<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
<!--    <link rel="stylesheet" href="../elementUI.css">-->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../base.css">
    <title>Title</title>
</head>
<body>
<div id="app">
    <el-row style="margin-top: 30px;">
        <el-col :span="4" :offset="10">
            <h1>举报原因</h1>
        </el-col>
    </el-row>

    <el-table
            :data="model"
            style="width: 100%">

        <el-table-column
                prop="id"
                label="id"
                width="180">
        </el-table-column>

        <el-table-column
                prop="cause"
                label="原因"
                width="180">
        </el-table-column>

        <el-table-column
                prop="manageId"
                label="创建人id"
                width="180">
        </el-table-column>

        <el-table-column
                prop="date"
                label="创建时间"
                width="180">
        </el-table-column>

        <el-table-column fixed="right"
                         label="操作"
                         width="120">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="del(scope.$index, scope.row)">删除
                </el-button>
            </template>
        </el-table-column>


        <el-table-column fixed="right"
                         label="操作"
                         width="120">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑
                </el-button>
            </template>
        </el-table-column>


    </el-table>

    <el-dialog title="修改原因" :visible.sync="dialogFormVisible">
        <el-form>
            <el-form-item label="原因" :label-width="formLabelWidth">
                <el-input v-model="model[edgeIndex].cause" auto-complete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="update">确 定</el-button>
        </div>
    </el-dialog>

    <el-row style="margin-top: 30px;">
        <el-col :span="2" :offset="22">
            <el-button type="primary" @click="addBox">添加</el-button>
        </el-col>
    </el-row>


    <el-dialog title="添加原因" :visible.sync="addDialogFormVisible">
        <el-form>
            <el-form-item label="原因" :label-width="formLabelWidth">
                <el-input v-model="addCause" auto-complete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="addDialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="add">确 定</el-button>
        </div>
    </el-dialog>

</div>
</body>
<!-- 先引入 Vue -->
<script src="../vue.js"></script>
<!-- 引入组件库 -->
<script src="../elementUI.js"></script>
<!-- vue ajax插件 -->
<script src="../axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            model: [],
            dialogFormVisible: false,
            formLabelWidth: '120px',
            edgeIndex: 0,
            addDialogFormVisible: false,
            addCause:""
        },
        created: function () {
            this.getDate();
        },
        methods: {
            //获取类型
            getDate() {
                var that = this;
                axios.defaults.withCredentials = true;
                axios.get('http://39.105.59.232/informcause').then(function (response) {
                    if (response.data.code == 200) {
                        that.model = response.data.data;
                    } else {
                        that.$alert("获取宠物类型失败", "提示");
                    }
                })
            },

            //删除类型
            del(row, col) {
                var that = this;
                axios.defaults.withCredentials = true;
                axios.delete('http://39.105.59.232/manage/informCause', {
                        data: {
                            id: col.id,
                        }
                    }
                ).then(function (response) {
                    if (response.data.code == 200) {
                        that.getDate();
                    } else {
                        that.$alert("更新举报原因失败", "提示");
                    }
                })
            },
            update() {
                var that = this;
                axios.defaults.withCredentials = true;
                axios.put('http://39.105.59.232/manage/informCause',
                    {
                        id: that.model[that.edgeIndex].id,
                        cause: that.model[that.edgeIndex].cause,
                        manageId: parent.v.user.username
                    }
                ).then(function (response) {
                    if (response.data.code == 200) {
                        that.getDate();
                        that.dialogFormVisible = false;
                    } else {
                        that.$alert("更新举报原因失败", "提示");
                    }
                })
            },
            //更改类型
            handleEdit(row, col) {
                this.edgeIndex = row;
                this.dialogFormVisible = true;
            },
            //添加box
            addBox() {
                this.addDialogFormVisible = true;
            },
            //添加
            add(){
                var that = this;
                axios.defaults.withCredentials = true;
                axios.post('http://39.105.59.232/manage/informCause',
                    {
                        cause: that.addCause,
                        manageId: parent.v.user.username
                    }
                ).then(function (response) {
                    if (response.data.code == 200) {
                        that.getDate();
                        that.addDialogFormVisible = false;
                    } else {
                        that.$alert("添加举报原因失败", "提示");
                    }
                })
            }

        }
    })
</script>
</html>